<template>
    <div class="archive_container">
        <div class="btn_container">
            <button class="diagnosis_btn" @click="clickDiagnosis" :class="diagnosisClass">诊断</button>
            <button class="suggestion_btn" @click="clickSuggestion" :class="suggestionClass">建议</button>
        </div>
        <KeepAlive>
            // TODO 使用component实现动态组件切换及数据传递
            
        </KeepAlive>
    </div>
</template>

<script setup>
    import {reactive, shallowRef, toRaw, watch } from 'vue';
    import { request } from '@/request';
    import { useAnswerListStore } from '@/stores';
    import Diagnosis from './Diagnosis.vue';
    import Suggestion from './Suggestion.vue';
    const answerListStore = useAnswerListStore()
    let detResult = reactive({diagnosis:"", suggestion:[]})
    let currentCmp = shallowRef(Diagnosis)

    let diagnosisClass = {active: true, normal: false}
    let suggestionClass = {active: false, normal: true}
    function clickDiagnosis() {
        Object.assign(diagnosisClass, {active: true, normal: false})
        Object.assign(suggestionClass, {active: false, normal: true})
        currentCmp.value = Diagnosis
    }

    function clickSuggestion() {
        Object.assign(diagnosisClass, {active: false, normal: true})
        Object.assign(suggestionClass, {active: true, normal: false})
        currentCmp.value = Suggestion
    }

    watch(answerListStore.answerList, (newVal) => {
        if (newVal.length > 0) {
            request.post("/getDetResult", {
                answerList: toRaw(newVal)
            }).then((res)=> {
                console.log("/getDetResult", res)
                Object.assign(detResult,  res.data.detResult)
            })
            .catch((err=> {
                console.log("/getDetResult", "error", err)
            }))
        }
    }, {
        immediate: true
    })
</script>

<style scoped>
    .archive_container {
        display: flex;
        flex-direction: column;
    }
    .btn_container {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin-top: 20px;
    }
    .diagnosis_btn, .suggestion_btn {
        width: 30%;
        height: 30px;
        font-size: 16px;
        cursor: pointer;
    }

    .active {
        background-color: blueviolet;
        border-radius: 3px;
        border-width: 0px;
        color: white;
        font-weight: bold;
    }
    .normal {
        background-color: lightblue;
        border-radius: 3px;
        border-width: 0px;
        color: black;
        font-weight: normal;
    }

</style>